<!doctype>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
		<title>Test de drag n drop</title>
		<style>
	  		#draggable { width: 50px; height: 50px; padding: 0.5em;  background-color:#00CCFF;}
	  		#draggable2 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#draggable3 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#draggable4 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#draggable5 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#draggable6 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#draggable7 { width: 50px; height: 50px; padding: 0.5em; background-color:#00CCFF;}
	  		#destination { width: 300px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color:#666666; overflow:auto;}
	  		#destination2 { margin: 0; padding: 0; width: 450px; height: 150px; background-color:#888888; overflow:auto;}
	  		#destination2 li { margin: 3px 3px 3px 3px; padding: 1px; float: left; width: 60px; height: 60px; text-align: center; }
	    </style>
	    <script>
		  $(function() {
			var maxColonne = 3;  
			  
		    $( "#draggable" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable2" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable3" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable4" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable5" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable6" ).draggable({ revert: true, helper: "clone" } );
		    $( "#draggable7" ).draggable({ revert: true, helper: "clone" } );
		    $( "#destination" ).droppable({
		        drop: function( event, ui ) {
		      		var champSource = $(ui.draggable[0]);
		      		if ($(this).find("#" + champSource.attr("id")).size() == 0) {
		      		
		      		ligne =Math.floor($( this ).find("div").size() / maxColonne);
		      		colonne =$( this ).find("div").size() % maxColonne;
		      		
		      		var table = $( this ).find("#tableDestination"); 
		      		if (table.find("tr[numLigne="+ligne + "]").size() ==0) {
		      			var nouvelleLigne = $('<tr/>', {
		      			    id: 'ligne'+ligne,
		      			    numLigne : ligne,
		      			});
		      			nouvelleLigne.appendTo(table);
		      			
		      			for (var i = 0; i < maxColonne;i++ ) {
		      				$('<td/>', {
			      			    id: 'colonne' + i,
			      			}).appendTo(nouvelleLigne);
		      			}	
		      		}
		      		
		      		var champDuplique = champSource.clone();
		      		
		      		
		      		$( this ).find("#tableDestination").find("#ligne"+ligne).find("#colonne" + colonne).append(champDuplique);
		        }
		        }
		      });
		    	$( "#destination2" ).droppable({
		        drop: function( event, ui ) {
		      		var champSource = $(ui.draggable[0]);
		      		if ($(this).find("#" + champSource.attr("id")).size() == 0) {
		      		

		      		var nouvelElement = $('<li/>');
		      		nouvelElement.appendTo($( this ));
		      		
		      		
		      		var champDuplique = champSource.clone();
		      		
		      		nouvelElement.append(champDuplique);
		        }
		        }
		      });
		    	$( "#destination2" ).sortable();
		    	$( "#destination2" ).disableSelection();
		  });
		</script>
	</head>
	<body>
		<div id="contenu" >
			<table>
				<tr>
					<td>
						<div id="draggable" class="ui-widget-content">
							1
						</div>
					</td>
					<td>
						<div id="draggable2" class="ui-widget-content">
							2
						</div>
					</td>
					<td>
						<div id="draggable3" class="ui-widget-content">
							3
						</div>
					</td>
					<td>
						<div id="draggable4" class="ui-widget-content">
							4
						</div>
					</td>
					<td>
						<div id="draggable5" class="ui-widget-content">
							5
						</div>
					</td>
					<td>
						<div id="draggable6" class="ui-widget-content">
							6
						</div>
					</td>
					<td>
						<div id="draggable7" class="ui-widget-content">
							7
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div id="destination" >
			<table id="tableDestination">
				
			</table>
		</div>
		<ul id="destination2">
		
		</ul>
	</body>
</html>